<template>
  <BasicModal
    title="查询条码"
    :width="300"
    v-bind="$attrs"
    @register="registerModel"
    :useWrapper="true"
    :showOkBtn="false"
    :showCancelBtn="false"
    destroyOnClose
  >
    <div class="enter-x flex justify-center">
      <template v-if="typeRef == 1">
        <a-qrcode :value="infoRef" ref="barCodeRef" />
      </template>
      <template v-else>
        <svg id="jsbarcode" ref="barCodeRef" />
      </template>
    </div>
    <div class="flex justify-center mt-4" v-if="typeRef == 1">
      <a-button type="primary" @click="downloadfile">下载</a-button>
    </div>
  </BasicModal>
</template>
<script setup lang="ts">
  import BasicModal from '@/components/Modal/src/BasicModal.vue';
  import { useModalInner } from '@/components/Modal';
  import { nextTick, ref } from 'vue';
  import { QRCode as AQrcode } from 'ant-design-vue';
  import { downloadByOnlineUrl } from '@/utils/file/download';
  import JsBarcode from 'jsbarcode';

  const typeRef = ref(1);
  const infoRef = ref('');
  const barCodeRef = ref(null);
  const [registerModel] = useModalInner(async (data) => {
    const { status, type, info } = data;
    if (status == 1) {
      typeRef.value = type;
      infoRef.value = info;
      if (type == 0) {
        await nextTick(() => {
          draw();
        });
      }
    }
  });

  const draw = () => {
    JsBarcode('#jsbarcode', infoRef.value, {
      format: 'CODE128',
      width: 1.65,
      height: 50,
      displayValue: true,
      fontSize: 15,
      margin: 15,
    });
  };
  const downloadfile = async () => {
    const url = await barCodeRef.value?.toDataURL();
    downloadByOnlineUrl(url, 'qrcode.png');
  };
</script>

<style scoped lang="less"></style>
